<!-- TeamListItem.vue -->
<template>
    <view class="team-list-item">
        <!-- 头部信息 -->
        <view class="header">
            <view class="left">
                <text class="name">{{ name }}</text>
                <text class="phone">{{ phone }}</text>
            </view>
            <view class="check-detail">
                查看明细 <text class="arrow">></text>
            </view>
        </view>
        
        <!-- 分割线 -->
        <view class="divider"></view>
        
        <!-- 数据展示部分 -->
        <view class="metrics">
            <view class="metric-item">
                <view class="metric-icon orange">
                    <image class="icon" :src="subTeamIcon" mode="aspectFit"></image>
                </view>
                <text class="metric-label">下级人数</text>
                <text class="metric-value">{{ subTeamCount }}</text>
            </view>
            
            <view class="metric-item">
                <view class="metric-icon red">
                    <image class="icon" :src="amountIcon" mode="aspectFit"></image>
                </view>
                <text class="metric-label">团队金额</text>
                <text class="metric-value">{{ amount }}<text class="unit">元</text></text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'TeamListItem',
    props: {
        name: {
            type: String,
            required: true
        },
        phone: {
            type: String,
            required: true
        },
        subTeamCount: {
            type: [Number, String],
            required: true
        },
        amount: {
            type: [Number, String],
            required: true
        },
        subTeamIcon: {
            type: String,
            default: 'path-to-sub-team-icon'
        },
        amountIcon: {
            type: String,
            default: 'path-to-amount-icon'
        }
    }
}
</script>

<style lang="scss" scoped>
.team-list-item {
    background-color: #fff;
    padding: 24rpx;
    margin-bottom: 2rpx;
    
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;
        
        .left {
            display: flex;
            align-items: center;
            gap: 12rpx;
            
            .name {
                font-size: 32rpx;
                font-weight: 500;
                color: #333;
            }
            
            .phone {
                font-size: 28rpx;
                color: #666;
            }
        }
        
        .check-detail {
            font-size: 24rpx;
            color: #999;
            
            .arrow {
                margin-left: 4rpx;
            }
        }
    }
    
    .divider {
        height: 1px;
        background-color: #f5f5f5;
        margin: 16rpx 0;
    }
    
    .metrics {
        display: flex;
        gap: 48rpx;
        
        .metric-item {
            display: flex;
            align-items: center;
            gap: 8rpx;
            
            .metric-icon {
                width: 32rpx;
                height: 32rpx;
                border-radius: 6rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                
                &.orange {
                    background-color: #FFF5E6;
                }
                
                &.red {
                    background-color: #FFF0F0;
                }
                
                .icon {
                    width: 20rpx;
                    height: 20rpx;
                }
            }
            
            .metric-label {
                font-size: 28rpx;
                color: #666;
            }
            
            .metric-value {
                font-size: 28rpx;
                color: #333;
                margin-left: 8rpx;
                
                .unit {
                    font-size: 24rpx;
                    color: #666;
                    margin-left: 4rpx;
                }
            }
        }
    }
}
</style>